import QtQuick 2.0
import QtQuick.Dialogs 1.3
import QtQuick.Controls 2.5
import CanvasHandler 1.0
import CanvasToolType 1.0
import FigureMap 1.0
import PluginHandler 1.0
import "./figure" as Figure

Column {
    id: out_column
    spacing: 20
    anchors.fill: parent

    Component.onCompleted: {
        console.log('===============================handler======================')
        FigureMap.insert(CanvasToolType.Circle, "figure/CanvasCircle.qml")
        FigureMap.insert(CanvasToolType.Rectangle, "figure/CanvasRectangle.qml")
    }

    function drawRectangle(x, y, width, height) {
        var ctx = canvasRect_canvas.getContext("2d")
        console.log("drawRectangle")
        ctx.beginPath()
        ctx.lineWidth = 5;
        ctx.strokeStyle = "black"
        ctx.rect(x, y, width, height)
        ctx.stroke();
        ctx.closePath()
    }

    function drawCircle(x, y, w, h) {
        var ctx = canvasRect_canvas.getContext("2d")
        console.log("drawCircle")
        ctx.lineWidth = 5;
        ctx.strokeStyle = "black"
        var r = Math.min(w, h) / 2
        ctx.beginPath()
        ctx.moveTo(x + r, y);                           // 左上终点 1
        ctx.lineTo(x + w - r, y)                        // 右上起点 2
        ctx.arcTo(x + w, y, x + w, y + r, r)            // 右上终点 3
        ctx.lineTo(x + w, y + h - r)                    // 右下起点 4
        ctx.arcTo(x + w, y + h, x + w - r, y + h, r);   // 右下终点 5
        ctx.lineTo(x + r, y + h);                       // 左下起点 6
        ctx.arcTo(x, y + h, x, y + h - r, r);           // 左下终点 7
        ctx.lineTo(x, y + r);                           // 左上起点 8
        ctx.arcTo(x, y, x + r, y, r);                   // 左上终点 1
        ctx.stroke()
        ctx.closePath()
    }

    // Text: 渲染引擎
    Rectangle {
        id: textRect
        height: 30
        width: parent.width
        Text {
            id: textRect_text
            anchors.top: parent.top
            anchors.topMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 10

            wrapMode: Text.WordWrap

            font.family: "Microsoft Yahei"
            font.pixelSize: 18
            font.wordSpacing: 5
            font.weight: Font.Bold
            font.letterSpacing: 2   // 字体间隔

            style: Text.Raised
            styleColor: "#cdcdcd"

            text: qsTr("Render Engine")
        }
    }

    Row {
        height: parent.height - textRect.height - 20
        width: parent.width

        anchors.left: parent.left
        anchors.leftMargin: 15
        anchors.right: parent.right
        anchors.rightMargin: 15

        spacing: 3

        // 工具栏
        CanvasToolBar {
            id: canvasToolBar
            height: parent.height
            width: 50
        }

        // 中间画布
        Rectangle {
            id: canvasRect

            border.width: 5
            border.color: "#c5cfdf"

            height: parent.height
            width: parent.width - canvasToolBar.width

            Canvas {
                id: canvasRect_canvas
                width: parent.width - parent.border.width * 2
                height: parent.height - parent.border.width * 2
                anchors.centerIn: parent
                renderStrategy: Canvas.Cooperative
                clip: true

                Component.onCompleted: {
                    CanvasHandler.recover(); //恢复现场
                }

                onPaint: {

                }
                MouseArea {
                    id: canvasRect_canvas_area
                    anchors.fill: parent
                    cursorShape: CanvasHandler.cursorShape
                    drag.target: paintDot
                    drag.axis: Drag.XAndYAxis

                    onPressed: {
                        // 绘画模式
                        if (CanvasHandler.cursorShape === Qt.CrossCursor) {
                            if (figure.visible) {
                                figure.visible = false
                                // 将图像绘制到画布上面
                                var fx = figure.x
                                var fy = figure.y
                                var fw = figure.width
                                var fh = figure.height
                                // === 会有错误
                                if (CanvasHandler.currentToolType == CanvasToolType.Rectangle) {
                                    drawRectangle(fx, fy, fw, fh)
                                    CanvasHandler.sendFigure(CanvasToolType.Rectangle, fx, fy, fw, fh)
                                }

                                if (CanvasHandler.currentToolType == CanvasToolType.Circle) {
                                    drawCircle(fx, fy, fw, fh)
                                    CanvasHandler.sendFigure(CanvasToolType.Circle, fx, fy, fw, fh)
                                }
                                canvasRect_canvas.requestPaint()
                                paintDot.visible = false 
                            } else {
                                figure.sourceComponent = Qt.createComponent(
                                            FigureMap.value(CanvasHandler.currentToolType))
                                // 重置位置
                                figure.startX = mouseX
                                figure.startY = mouseY
                                paintDot.x = mouseX
                                paintDot.y = mouseY
                                figure.visible = true
                                paintDot.visible = true
                            }
                        }
                    }

                    // 画点
                    Item {
                        id: paintDot
                        width: 1
                        height: 1
                        z: 1
                    }

                    // 图形
                    Loader {
                        property int startX
                        property int startY
                        property int endX: paintDot.x
                        property int endY: paintDot.y

                        id: figure
                        visible: false
                        x: startX < endX ? startX : endX
                        y: startY < endY ? startY : endY
                        width: Math.abs(startX - endX)
                        height: Math.abs(startY - endY)

//                        Loader {
//                            id: moveLoader
//                            x: parent.x
//                            y: parent.y
//                            anchors.fill: parent
//                        }
//                        Loader {
//                            id: resizeBorderLoader
//                            x: parent.x
//                            y: parent.y
//                            width: parent.width
//                            height: parent.height
//                        }
//                        onVisibleChanged: {
//                            if (visible) {
////                                moveLoader.sourceComponent = Qt.createComponent("figure/MoveArea.qml")
//                                resizeBorderLoader.sourceComponent = Qt.createComponent("figure/ResizeBorder.qml")
//                            } else {
////                                moveLoader.sourceComponent.destroy()
//                                resizeBorderLoader.sourceComponent.destroy()
//                            }
//                        }
                    }
                }
            }

            MessageDialog {
                id: myDialog
                title: qsTr("提示")
                icon: StandardIcon.Critical

                function show(caption) {
                    myDialog.text = caption;
                    myDialog.open();
                }
            }

            Connections {
                target: CanvasHandler
                function onCurrentToolTypeChanged() {

                }
                function onNotice(str) {
                    console.log(str)
                    myDialog.show(str)
                }
                function onClearCanvas() {
                    var ctx = canvasRect_canvas.getContext("2d")
                    ctx.clearRect(0, 0, canvasRect_canvas.width, canvasRect_canvas.height);
                    canvasRect_canvas.requestPaint();
//                    CanvasHandler.clearCanvas()
                    console.log('===================clear=================')
                }
                function onDraw(type, x, y, h, w) {
                    console.log('============================ondraw=========================')
                    if (type === "Rect") {
                        drawRectangle(x, y, w, h);
                    } else if (type === "Circle") {
                        drawCircle(x, y, w, h);
                    }
                }
            }
        } // 中间画布
    }
}
